<template>
  <div class="artile-item" @click="$router.push(`/article-detail/${articleList.id}`)">
    <!-- 作者部分 -->
    <div class="author-info">
      <img class="avatar" :src="articleList.avatar" alt="头像" />
      <div>
        <h3 class="article-title">{{articleList.stem}}</h3>
        <p class="article-author">{{ articleList.creator }}| {{articleList.createdAt}}</p>
      </div>
    </div>
    <!-- 内容部分 -->
    <p class="article-content">
      {{formatContent}}
    </p>
    <!-- 文章状态 -->
    <div class="author-state">点赞 {{articleList.linkCount}} | 浏览 {{articleList.views}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props: {
    articleList: Object
  },
  computed: {
    formatContent() {
      return this.articleList.content.replace(/<[^>]*>/g, "")
    }
  }
};
</script>

<style scoped>
.artile-item {
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  font-size: 12px;
}

.author-info {
  display: flex;
}

.avatar {
  width: 50px;
  height: 50px;
  margin-right: 16px;
  border-radius: 50%;
}

.article-title {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 18px;
}

.article-author {
  margin-top: 0;
  margin-bottom: 0;
  color: #999;
}

.article-content {
  margin-top: 8px;
  margin-bottom: 8px;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;
}

.author-state {
  color: #999;
}
</style>